<template>
  <div>
    <!-- <Header /> -->
    <Address/>
    <div class="main_box w">
      <div class="main_left">
        <div class="cont_list">
          <el-table
            :data="tableData"
            style="width: 100%"
            @row-click="handleClick">
            <el-table-column prop="title"></el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            >
          </el-pagination>
        </div>
      </div>
      <dataCent/>
    </div>
    <!-- <Footer /> -->
  </div>
</template>

<script>
    // import Header from "@/components/header";
    import Address from "@/components/address";
    import Footer from "@/components/footer";
    import dataCent from "@/components/dataCent";
    import request from "@/plugins/request";
    import {api} from "@/plugins/api/index";

    export default {
        components: {
            // Header,
            Address,
            Footer,
            dataCent,
        },
        data() {
            return {
                menu_id: "3",
                currentPage: 1,
                pageSize: 10,
                total: 13,
                title: "",
                tableData: [],
            };
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                const {menu_id, currentPage, pageSize} = this;
                let params = {
                    menu_id,
                    currentPage,
                    pageSize,
                };
                request(api.pageList, params, "get").then((res) => {
                    this.tableData = res.items;
                    this.total = res.total;
                });
            },
            handleCurrentChange(val) {
                console.log("第几页" + val);
                this.currentPage = val;
                this.getList();
            },
            handleSizeChange(val) {
                console.log("每页大小" + val);
                this.pageSize = val;
                this.getList();
            },
            handleClick(event) {
                console.log(event);
                this.$router.push(`./details/${event.id}`);
            },
        },
    };
</script>

<style lang="scss" scoped>
  @import "~/assets/css/main.scss";

  .service {
    .main_box {
      //   position: ;
      display: flex;
      margin-bottom: rem(30);

      .main_left {
        padding: rem(20);
        flex: 1;

        .cont_list {
          min-height: rem(526);

          ::v-deep .el-table {
            .el-table__row {
              cursor: pointer;

              &:hover {
                color: #5cbcfe;
              }
            }

          }
        }
      }

      .main_right {
        width: rem(200);
        background-color: #f6f9fc;

        .list_item {
          .title {
            display: flex;
            height: rem(40);
            color: #337ab7;
            font-size: rem(18);
            border-bottom: 2px solid #e7edf2;
            margin: 0 rem(10);

            .more {
              font-size: rem(10);
            }
          }

          .cont {
            margin: 0 rem(10);

            .item {
              padding: rem(5) rem(5);
              border-bottom: 1px dotted #e4e6e8;
              cursor: pointer;

              i {
                margin: 0 rem(3);
              }

              &:hover {
                color: #5cb6ff;
              }
            }
          }
        }
      }

      .page {
        text-align: right;
        margin-top: rem(50);
      }
    }
  }
</style>
